How does the legend component limit the width of the graph?

Question Description

Use VChart. When the legend text is relatively long, it is expected to limit the width of the legend items to prevent the legend from taking up too much space and causing this kind of paging.

Solution

VChart's legend component provides the configuration of the maximum width of the legend item. You can configure the desired value. When the legend item exceeds this maximum value, the text will be omitted, and a prompt message will appear when the mouse hovers over it.

legends: [
  {
    type: 'discrete',
    item: {
      maxWidth: 200
    }
  }
];

Code Example

Quote

• github
• legends configuration